<template>
  <el-card class="order-container">
    <template #header>
      <div class="header">
        <div class="search">
          <el-input
            style="width: 220px; margin-right: 10px"
            placeholder="订单号"
            v-model="params.orderno"
            @change="query"
            clearable
          />
        </div>
      </div>
    </template>

    <el-table
      class="table-row-optimize"
      v-loading="state.loading"
      ref="multipleTable"
      :data="state.tableData"
      tooltip-effect="dark">

      <el-table-column prop="orderno" label="订单号"/>
      <el-table-column prop="fee" label="充值金额" align="center" width="140">
        <template #default="scope">
          <span class="fee"><strong>￥</strong>{{ scope.row.fee }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="paied" label="状态" align="center" width="100">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.paied === 1">已付款</el-tag>
          <el-tag type="danger" v-else-if="scope.row.paied === 2">已取消</el-tag>
          <el-tag type="primary" v-else>待付款</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="fee" label="充值时间" width="200">
        <template #default="scope">
          {{ toDateTime(scope.row.created_at) }}
        </template>
      </el-table-column>

      <el-table-column prop="status" label="个人信息">
        <template #default="scope">
          <div>{{ scope.row.uname }} 　<span class="address">{{ scope.row.phone }}</span></div>
        </template>
      </el-table-column>

    </el-table>

    <!--总数超过一页，再展示分页器-->
    <el-pagination
      background
      layout="prev, pager, next, jumper, total"
      :total="state.total"
      :page-size="params.limit"
      :current-page="params.page"
      @current-change="changePage"
    />
  </el-card>
</template>


<script setup>
import { toDateTime } from '../utils'
import { onMounted, reactive } from "vue";
import { AdminRechargeOrderList } from '../api/server/order/recharge'

const state = reactive({
  loading: true,
  tableData: null,
  total: 0,
})
const params = reactive({
  page: 1,
  limit: 10,
  orderno: '',
  status: '',
})

onMounted(() => {
  getList()
})

const getList = async (page) => {
  page && (params.page = page)
  state.loading = true
  const { data, total, current_page } = await AdminRechargeOrderList(params)
  state.tableData = data
  state.total = total
  params.page = current_page
  state.loading = false;
}

const query = () => getList()
const refresh = () => getList()
const changePage = page => getList(page)

</script>

<style scoped>

span.fee {
  color: #ff4d51;
}

span.fee strong {
  font-size: 16px;
}

span.address {
  color: rgb(189 189 189);
}

/** 设置表格行高 */
.table-row-optimize :deep(.el-table__body .el-table__row) {
  height: 72px;
}
</style>
